<template>
	<div>
		<el-dialog
			v-model="props.show"
			:title="props.title"
			ref="ruleFormRef"
			width="500"
			:rules="rules"
			draggable
			destroy-on-close
			:close="beforeEvent"
			:show-close="false"
		>
			<div style="margin-top: 10px; margin-left: 80px">
				<!-- 表单数据 -->
				<el-form style="max-width: 600px" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="form.name" autocomplete="off" style="width: 250px" clearable />
					</el-form-item>
					<el-form-item label="学号" prop="card">
						<el-input v-model="form.card" autocomplete="off" style="width: 250px" clearable />
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="form.password" autocomplete="off" style="width: 250px" :disabled="true" clearable />
					</el-form-item>

					<el-form-item label="楼栋" prop="build">
						<!-- <el-input v-model="form.build" autocomplete="off" style="width: 250px" @click="getInfo('build')" /> -->
						<el-select v-model="form.build" placeholder="选择楼栋" autocomplete="off" style="width: 240px" clearable>
							<el-option v-for="item in options" :key="item?.build_id" :label="item?.build_name" :value="item?.build_name" />
						</el-select>
					</el-form-item>
					<el-form-item label="楼层" prop="floor">
						<!-- <el-input v-model="form.floor" autocomplete="off" style="width: 250px" /> -->
						<el-select
							v-model="form.floor"
							placeholder="选择楼层"
							autocomplete="off"
							style="width: 240px"
							@click="getFoolr"
							clearable
						>
							<el-option v-for="item in optionsFloor" :key="item.id" :label="item?.label" :value="item?.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="房间" prop="room">
						<!-- <el-input v-model="form.room" autocomplete="off" style="width: 250px" @click="getInfo('room')" /> -->
						<el-select
							v-model="form.room"
							placeholder="选择楼层"
							autocomplete="off"
							style="width: 240px"
							@click="getRoom"
							clearable
						>
							<el-option v-for="item in roomList" :key="item.id" :label="item?.label" :value="item?.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="电话" prop="tel">
						<el-input v-model="form.tel" autocomplete="off" style="width: 250px" clearable />
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="form.email" autocomplete="off" style="width: 250px" clearable placeholder="输入邮箱" />
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-select v-model="form.sex" placeholder="选择性别" autocomplete="off" style="width: 240px" clearable>
							<el-option v-for="item in sexList" :key="item.value" :label="item?.label" :value="item?.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="学院" prop="profession">
						<el-select v-model="form.profession" placeholder="选择学院" autocomplete="off" style="width: 240px" clearable>
							<el-option v-for="item in professionList" :key="item.value" :label="item?.label" :value="item?.value" />
						</el-select>
						<!-- <el-input v-model="form.tel" autocomplete="off" style="width: 250px"  clearable/> -->
					</el-form-item>
					<el-form-item style="margin-left: 250px">
						<el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
						<el-button @click="giveFather">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- <template #footer>
				<div class="dialog-footer">
					<el-button @click="giveFather">取消</el-button>
					<el-button type="primary" @click="giveFather"> 保存 </el-button>
				</div>
			</template> -->
		</el-dialog>
	</div>
</template>

<script setup>
import { getBuild, getFloors, getRooms, addCard, addStudent } from "@/api/admin/home";
import { getDians ,insertRoom } from "@/api/student/home";
import { onMounted } from "vue";
import xzid from "xzid";
import { ref, defineEmits, defineProps, reactive } from "vue";
const form = reactive({
	name: "",
	card: "",
	build: "",
	floor: "",
	room: "",
	tel: "",
	password: "123456",
	profession: "",
	sex: "",
	email: ""
});
const options = ref([]);
// 楼层信息
const optionsFloor = ref();
const ruleFormRef = ref();
// 楼层
const sexList = ref([
	{
		label: "男",
		value: 0
	},
	{
		label: "女",
		value: 1
	}
]);
const roomId = ref("");
const roomList = ref([]);
const professionList = ref([
	{
		label: "计算机工程学院",
		value: "计算机工程学院"
	},
	{
		label: "电子工程学院",
		value: "电子工程学院"
	},
	{
		label: "信息工程学院",
		value: "信息工程学院"
	},
	{
		label: "财经学院",
		value: "财经学院"
	}
]);
const rules = reactive({
	name: [
		{
			required: true
		}
	],
	card: [
		{
			required: true
		}
	],
	build: [
		{
			required: true
		}
	],
	floor: [
		{
			required: true
		}
	],
	room: [
		{
			required: true
		}
	],
	tel: [
		{
			required: true
		}
	],
	profession: [
		{
			required: true
		}
	],
	sex: [
		{
			required: true
		}
	],
	email: [
		{
			required: true
		}
	]
});

const emits = defineEmits();
const props = defineProps(["show", "title"]);
// 获取楼栋信息
const getValue = async () => {
	const res = await getBuild();
	// console.log(res);
	if (res.data.code === 200) {
		options.value = res.data.data;
		console.log(options.value);
	} else {
		ElNotification({
			message: "获取信息失败 ",
			type: "error",
			duration: 3000
		});
	}
};
// 获取楼栋对应的册层数
const getFoolr = async () => {
	let id = options?.value.filter(it => it.build_name === form.build);
	let buildId = id[0]?.build_id;
	const res = await getFloors(buildId);
	if (res.data.code === 200) {
		// flootId.value = res.data.data.filter(it=>it?.floor === form.floor);
		// roomId.value = res.data.data.filter(it=>it.floor === form.floor);
		// console.log(roomId.value)
		let arr = res.data.data.map(it => {
			return {
				label: it?.floor,
				value: it?.floor,
				id: it?.floor_id
			};
		});
		if (arr.length > 0) {
			optionsFloor.value = arr;
		} else {
			optionsFloor.value = [];
		}
	} else {
		ElNotification({
			message: "获取信息失败 ",
			type: "error",
			duration: 3000
		});
	}
};
function uniqueByProperty(arr, propertyName) {  
    const seen = new Set();  
    return arr.filter(item => {  
        const val = item[propertyName];  
        if (!seen.has(val)) {  
            seen.add(val);  
            return true;  
        }  
        return false;  
    });  
}  
// 查看对应的房间
const getRoom = async () => {
	// console.log(form.floor)
	let room = optionsFloor.value.filter(it => it.value === form.floor);
	// console.log(room)
	roomId.value = room[0]?.id;
	const res = await getRooms(room[0]?.id);
	if (res.data.code === 200) {
		let quChong = uniqueByProperty(res.data.data,'room_id');
		
		let arr = quChong.map(it => {
			return {
				id: it.room_id,
				label: it.room,
				value: it.room
			};
		});
		if (arr.length > 0) {
			roomList.value = arr;
		} else {
			roomList.value = [];
		}
		// roomList.value = arr;
		// console.log(roomList.value)
	} else {
		ElNotification({
			message: "获取信息失败 ",
			type: "error",
			duration: 3000
		});
	}
};
const giveFather = () => {
	emits("giveFather", false);
};
// 提交数据
const submitForm = async () => {
	if (
		form.name === "" ||
		form.build === "" ||
		form.card === "" ||
		form.floor === "" ||
		form.email === "" ||
		form.profession === "" ||
		form.room === "" ||
		form.sex === "" ||
		form.tel === ""
	) {
		// console.log( xzid())

		console.log(form);
		return ElNotification({
			message: "数据输入不完整",
			type: "error",
			duration: 3000
		});
	} else {
		form.type = "student";
		form.school_id = xzid();
		form.student_id = xzid();
		form.room_id = roomId.value;
		form.floor_id = optionsFloor.value.filter(it => it.value === form.floor)[0]?.id;
		form.build_id = options?.value.filter(it => it.build_name === form.build)[0]?.build_id;
		// const res = await addStudent(form);
		// const resCard = await addCard(form.school_id);
		const dian = await getDians(form.room_id);
		let obj = {
			roomId:form.room_id,
			room:form.room,
			floor_id:form.floor_id,
			room_num:1,
			room_dian:dian.data.data[0]?.room_dian,
			student_id:form.student_id,
			room_water:dian.data.data[0]?.room_water
		}
		// console.log(form)
		// console.log(dian)
		// console.log(obj,dian)
		// return
		const res = await addStudent(form);
		const resCard = await addCard(form.school_id);
		if (res.data.code === 200) {
			const res1 = await insertRoom(obj);
			console.log(res1);
			debugger
			giveFather()
			return ElNotification({
				message: "新增成功",
				type: "success",
				duration: 3000
			});

		}
		if(resCard.data.code === 200){
			console.log('成功')
		}
	}
};
onMounted(() => {
	getValue();
});

</script>

<style scoped></style>
